<template>
	<view>
		<view class="head">
			<text>Hi~</text>
			<text>精彩绝伦欢迎您</text>
		</view>
		<!-- 登录框 -->
		<view class="container">
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index"
					:class="['tab', activeTabIndex === index? 'active' : '']" @click="selectTab(index)">
					{{ tab.label }}
				</view>
			</view>
			<view class="tab-content">
				<view v-if="activeTabIndex === 0">
					<input type="text" v-model="username" placeholder="请输入手机号码">
					<input type="password" v-model="password" placeholder="请输入密码">
				</view>
				<view class="tab-down">
					<view>验证码登陆</view>
					<view>忘记密码</view>
				</view>
				<button @click="login">点击登陆</button>
				<view v-if="activeTabIndex === 1">
					这是选项卡 2 的内容。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      username: '',
	      password: '',
	      tabs: [
	        { label: '登陆' },
	        { label: '注册' }
	      ],
	      activeTabIndex: 0
	    };
	  },
	  methods: {
	    selectTab(index) {
	      this.activeTabIndex = index;
	    },
	    login() {
	      uni.request({
	        url: 'http://1.92.82.82:3001/api/User/Login',
	        method: 'post',
	        data: {
	          username: 'username',
	          password: 'password'
	        },
	        success: (res) => {
	          if (res.data.code === 200) {
	            let token = res.data.data.token;
	            uni.setStorageSync('token', token);
	          } else {
	            alert("账号或密码错误！");
	          }
	        }
	      });
	    },
	    // login() {
	    //   if (!this.user) {
	    //     this.uni.showModal({
	    //       content: "请输入账号",
	    //       showcCancel: false
	    //     });
	    //     return false;
	    //   }
	    //   if (!this.pass) {
	    //     this.uni.showModal({
	    //       content: "请输入密码",
	    //       showcCancel: false
	    //     });
	    //     return false;
	    //   }
	    //   let user = this.user.trim();
	    //   let pass = this.pass.trim();
	    // }
	  }
	};
</script>

<style>
	.head {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		color: black;
		font-size: 50rpx;
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		padding-top: 200rpx;
	}

	.container {
		padding: 20px;
		background-color: #fff;
		width: 90%;
		margin: 0 auto;
		height: 500rpx;
		border-radius: 20rpx;
	}

	.tabs {
		display: flex;
		border-bottom: 1px solid #ccc;
		justify-content: space-around;
	}

	.tab {
		padding: 10px 20px;
		cursor: pointer;
		justify-content: space-around;
	}

	.active {
		border-bottom: 2px solid deeppink;
	}

	.tab-content {
		padding: 20px;
	}

	input {
		border-bottom: 1px solid hotpink;
		margin: 20rpx 0;
		width: 100%;
		height: 60rpx;
	}

	.tab-down {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	button {
		width: 50%;
		height: 80rpx;
		margin-top: 20rpx;
		background-color: hotpink;
	}
</style>